{% extends "index_base.html" %}
{% block content %}
<style type="text/css">
.page{padding-top:10px;padding-bottom:10px;background-color:#CCCCCC;}
DIV.black-red {
FONT-SIZE: 11px; COLOR: #000; FONT-FAMILY: Tahoma, Arial, Helvetica, Sans-serif; BACKGROUND-COLOR: #ccc
}
DIV.black-red A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #000; PADDING-TOP: 2px; TEXT-DECORATION: none
} 
DIV.black-red A:hover {
COLOR: #fff; BACKGROUND-COLOR: #ccc
}
DIV.black-red A:active {
COLOR: #fff; BACKGROUND-COLOR: #ccc
}
DIV.black-red SPAN.current {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 2px;
}
DIV.black-red SPAN.disabled {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 2px; BACKGROUND-COLOR: #fff
}
</style>

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/site_media/js/excanvas.js"></script><![endif]-->
  <link rel="stylesheet" type="text/css" href="/site_media/css/jquery.jqplot.css" />
  <script language="javascript" type="text/javascript" src="/site_media/js/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/site_media/js/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    var $table = $('#visittable');
	var $tfoot = $("#tfoot");
    //分页效果
    var currentPage = 0;  //当前页
    var pageSize = 6;  //每页行数（不包括表头）
    //绑定分页事件
    $table.bind('repaginate', function()
    {
        $table.find('tbody tr').hide()
            .slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
    });
    var numRows = $table.find('tbody tr').length;  //记录宗条数
    var numPages = Math.ceil(numRows/pageSize);    //总页数
    
    var $pager = $('<div class="black-red"></div>');  //分页div
    for( var page = 0; page < numPages; page++ )
    {
        //为分页标签加上链接
        $('<a href="#" >'+ (page+1) +'</a>')
            .bind("click", { "newPage": page }, function(event) 
            {           
                currentPage = event.data["newPage"];                  
                $table.trigger("repaginate");             
            })
           .appendTo($pager); 
         
        $pager.append("");
    }
    $pager.insertAfter($tfoot);    //分页div插入table
    $table.trigger("repaginate");  //初始化   


	/////////////////////////////////
	var $table2 = $('#calltable');
	var $tfoot2 = $("#tfoothistory");
    //分页效果
    var currentPage = 0;  //当前页
    var pageSize = 6;  //每页行数（不包括表头）
    //绑定分页事件
    $table2.bind('repaginate', function()
    {
        $table2.find('tbody tr').hide()
            .slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
    });
    var numRows = $table2.find('tbody tr').length;  //记录宗条数
    var numPages = Math.ceil(numRows/pageSize);    //总页数
    
    var $pager = $('<div class="black-red"></div>');  //分页div
    for( var page = 0; page < numPages; page++ )
    {
        //为分页标签加上链接
        $('<a href="#" >'+ (page+1) +'</a>')
            .bind("click", { "newPage": page }, function(event) 
            {           
                currentPage = event.data["newPage"];                  
                $table2.trigger("repaginate");             
            })
           .appendTo($pager); 
         
        $pager.append("");
    }
    $pager.insertAfter($tfoot2);    //分页div插入table
    $table2.trigger("repaginate");  //初始化   


	//////////////////////////////[['2011-06-19', 1L], ['2011-06-18', 1L], ['2011-06-17', 1L], ['2011-06-16', 0L]]
    
    
	var line1 = $("#abcdd").html();
	var line2 = $("#efgh").html();


	var maxnum = $("#maxnum").html();
	
    var plot1 = $.jqplot('chart1', [eval(line1),eval(line2)], {
      title:'系统调用趋势图',
      axes:
          {
        	xaxis:{renderer:$.jqplot.DateAxisRenderer},
        	yaxis:{min:0,max:maxnum},
		  },


      

      legend: { 
    	  show: true
      },
      
      series:[{label: 'commit'}, {label: 'get'}]
    });


	
});
</script>

  <div class="content">
  
  <div class="edit-avatar" style="width:1000px;">
    <table border="0" align="center" cellpadding="2" cellspacing="2" class="main_table" >
      <tr>
        <th colspan="3" scope="col">报表<span id="abcdd" style="display:none">{{commitarray}}</span>
        
        <span id="efgh" style="display:none">{{getlist}}</span>
        
        
        
        <span id="maxnum" style="display:none">{{maxnum}}</span>
          </th>
        </tr>
      <tr>
        <td colspan="3"></td>
      </tr>
      <tr>
        <td width="36%">最近访问用户<br> 
        
        
        <table id="visittable"  width="95%" border="1" align="center" class="main_table">
        <thead>
			<tr>
			<th width="78" scope="col">名称</td><th width="230" scope="col">时间</td>
			</tr>
		</thead>
			<tbody>
			{% for objlog in loginlist %}
			<tr>
				<td>{{objlog.a|default_if_none:objlog.chname}}</td><!-- 修订 -->
				<td>{{objlog.times}}</td>
			</tr>
			{% endfor %}
			</tbody>
			<tfoot>
			 <tr>
			 <td colspan="2">
			 <div style="padding-top:0px;padding-bottom:0px;background-color:#CCCCCC;">
			 <div id="tfoot"></div>
			 </div>
			 </td></tr>
			 </tfoot>
		</table>
		</td>
          <td colspan="2" width="64%">最近调用<br> 
			<table id="calltable"  width="95%" border="1" align="center" class="main_table">
			 <thead>
				<tr>
				<th width="110">主机名</td>
				<th width="110">IP</td><th width="100">快照名</td>
				<th width="70">版本</td><th width="250">时间</td>
				</tr>
				</thead>
				<tbody>
				{% for objlog in historylist %}<tr>
				<td>{{objlog.clientname}}</td>
				<td>{{objlog.clientip}}</td>
				<td>{{objlog.filename}}</td>
				<td>{{objlog.version}}</td>
				<td>{{objlog.times}}</td></tr>
			{% endfor %}
			</tbody>
			
			<tfoot>
			 <tr>
			 <td colspan="5">
			 <div style="padding-top:0px;padding-bottom:0px;background-color:#fff;">
			 <div id="tfoothistory"></div>
			 </div>
			 </td></tr>
			 </tfoot>
			
			</table>	
		</td>
      </tr>
       <tr>
			<td colspan="3" style="text-algin:left">
				
			</td>
       </tr>
    </table>
    
    <table border="0" align="center" cellpadding="2" cellspacing="2" class="main_table" >
    	<tr>
    		<td>
    		<div id="chart1" style="margin-top:20px; margin-left:10px; width:880px; height:300px;"></div>
    		</td>
    	</tr>
    </table>
    
  </div>
  </div>
{%endblock%}
